<template>
	<div>
		<el-row :gutter="20">
			<el-col :xs="12" :sm="5" :md="5" :lg="4"><el-input placeholder="请输入名称" v-model="listQuery.content" clearable></el-input></el-col>
			<el-col :xs="12" :sm="8" :md="8" :lg="4"><el-input placeholder="请输入编码" v-model="listQuery.code" clearable></el-input></el-col>
			<el-col :xs="12" :sm="8" :md="8" :lg="4"><el-input placeholder="请输入备注" v-model="listQuery.name" clearable></el-input></el-col>
			<el-col :xs="12" :sm="4" style="padding: 0">
				<el-button type="custom" @click="getList()" plain>搜索</el-button>
				<el-button type="custom" @click="showEditDialog('add')">新增</el-button>
			</el-col>
		</el-row>

		<el-table :data="dictionaryTableData" style="width: 100%" stripe v-loading="loading">
			<el-table-column fixed prop="content" label="名称" show-overflow-tooltip=""></el-table-column>
			<el-table-column prop="code" label="编码" show-overflow-tooltip=""></el-table-column>
			<el-table-column prop="name" label="备注" width="150"></el-table-column>
			<el-table-column prop="type" label="类型" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type == 1" type="success">枚举</el-tag>
					<el-tag v-if="scope.row.type == 2">常量</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="primary" size="mini" @click="toDetails(row)" class="jurisdiction" v-if="row.type == 1">子级</el-button>
						<el-button type="primary" size="mini" @click="showEditDialog('edit', row)" class="jurisdiction">编辑</el-button>
						<el-button type="danger" size="mini" @click="showDeleDialog(row)" class="jurisdiction">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<Pagination
			style="margin-top: 20px"
			v-show="parseInt(pageObj.count) > 0"
			:total="parseInt(pageObj.count)"
			@change="getList"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
		/>

		<el-dialog
			:title="dialogTitle"
			:visible.sync="dialogFormVisible"
			width="700px"
			class="dialog-wrap"
			@close="$reset('temp')"
			:close-on-click-modal="false"
		>
			<el-form ref="temp" :model="temp" :rules="rules" label-width="80px">
				<el-form-item label="编码" prop="code">
					<el-input v-model="temp.code"></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="content">
					<el-input v-model="temp.content"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="name">
					<el-input type="textarea" v-model="temp.name"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="temp.type">
						<el-radio label="2">常量</el-radio>
						<el-radio label="1">枚举</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-show="!addOrEdit" type="custom" v-preventReClick @click="handleAdd('temp')">新 增</el-button>
				<el-button v-show="addOrEdit" type="custom" v-preventReClick @click="handleUpdate('temp')">提 交</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { tbDictDefinitionQuery, tbDictDefinitionAdd, tbDictDefinitionUpdate, tbDictDefinitionDelete } from '@/api/admin/system/dictionary';
export default {
	created() {
		this.getList();
	},
	data() {
		return {
			qType: this.$route.query.id,
			temp: {},
			dialogTitle: '数据字典-新增',
			listQuery: {
				page: 1,
				limit: 10,
				code: '', //编码
				content: '', //描述
				name: '', //名称
				type: '' //类型1.枚举 2.常量
			},
			dictionaryTableData: [],
			pageObj: {},
			dataValue: '',
			loading: false,
			addOrEdit: true,
			dialogFormVisible: false,
			rules: {
				code: [
					{ required: true, message: '请输入编码', trigger: 'blur' },
					{
						trigger: 'blur'
					}
				],
				name: [
					{ required: true, message: '请输入描述', trigger: 'blur' },
					{
						trigger: 'blur'
					}
				],
				content: [
					{ required: true, message: '请输入名称', trigger: 'blur' },
					{
						trigger: 'blur'
					}
				],
				type: [{ required: true, message: '请选择类型', trigger: 'change' }]
			}
		};
	},

	methods: {
		//获取列表
		getList() {
			this.loading = true;
			tbDictDefinitionQuery(this.listQuery).then((res) => {
				this.dictionaryTableData = res.data.data;
				this.pageObj = res.data;
				this.loading = false;
			});
		},
		// 显示编辑弹出框
		showEditDialog(type, row) {
			if (type == 'edit') {
				this.addOrEdit = true;
				this.dialogTitle = '数据字典-编辑';
			} else {
				this.addOrEdit = false;
				this.dialogTitle = '数据字典-新增';
			}
			this.temp = { ...row };

			this.dialogFormVisible = true;
		},
		//编辑
		handleUpdate(temp) {
			this.$refs[temp].validate((valid) => {
				if (valid) {
					tbDictDefinitionUpdate(this.temp).then((res) => {
						if (res.data.code == 0) {
							this.$message.success('保存成功');
							this.dialogFormVisible = false;

							this.getList();
						} else {
							this.$message.error(res.data.msg);
						}
					});
				}
			});
		},
		//新增
		handleAdd(temp) {
			this.$refs[temp].validate((valid) => {
				if (valid) {
					let obj = {
						entity: this.temp,
						code: this.temp.code,
						content: this.temp.content,
						name: this.temp.name,
						type: this.temp.type
					};

					tbDictDefinitionAdd(obj).then((res) => {
						if (res.data.code == 0) {
							this.$message.success('保存成功');
							this.dialogFormVisible = false;

							this.getList();
						} else {
							this.$message.error(res.data.msg);
						}
					});
				}
			});
		},
		// 删除
		showDeleDialog(row) {
			this.temp = { ...row };
			this.$confirm('确认删除？删除之后不再恢复', '提示', {
				type: 'warning'
			})
				.then((_) => {
					tbDictDefinitionDelete(this.temp.id).then((res) => {
						if (res.data.code == 0) {
							this.$message.success('删除成功');

							this.getList();
						} else {
							this.$message.error(res.data.msg);
						}
					});
				})
				.catch((_) => {});
		},
		// 跳转详情
		toDetails(row) {
			this.$router.push({
				path: '/admin/system/dictionaryDet',
				query: { id: row.id }
			});
		}
	}
};
</script>
<style>
.dialog-wrap .el-form-item__label:before {
	content: '*';
	color: #f56c6c;
	margin-right: 4px;
}
</style>
